<template>
    <popup
        ref="popupRef"
        title="新增"
        :async="true"
        width="30%"
        :clickModalClose="true"
        @confirm="handleConfirm"
        @close="handleClose"
    >
        <el-form
            ref="formRef"
            :model="formData"
            label-width="130px"
            :rules="formRules"
            label-position="right"
        >
            <el-form-item label="权限名称" prop="title">
                <el-input
                    v-model="formData.title"
                    size="small"
                    clearable
                    placeholder="请输入权限名称"
                />
            </el-form-item>
            <el-form-item label="选择项目">
                <el-select
                    class="flex-1"
                    v-model="formData.project_id"
                    placeholder="请选择项目"
                    size="small"
                >
                    <el-option
                        v-for="(item, index) in props.projectList"
                        :key="item.id"
                        :label="item.title"
                        :value="item.id"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="权限配置">
                <el-checkbox-group v-model="formData.perm_config">
                    <el-checkbox
                        v-for="item in permissionList"
                        :label="item.value"
                        :key="item.value"
                        style="height: max-content"
                    >
                        {{ item.name }}
                    </el-checkbox>
                </el-checkbox-group>
            </el-form-item>
        </el-form>
    </popup>
</template>
<script lang="ts" setup>
import type { FormInstance } from 'element-plus'
import { adminAdd } from '@/api/financial/limits'
import { listAll } from '@/api/financial/lists'
import Popup from '@/components/popup/index.vue'
const emit = defineEmits(['success', 'close'])
const formRef = shallowRef<FormInstance>()
const popupRef = shallowRef<InstanceType<typeof Popup>>()
const formData = reactive({
    title: '',
    project_id: '',
    perm_config: []
})
const formRules = reactive({
    title: [{ required: true, message: '请输入名称', trigger: ['change'] }]
})
// 分类列表
// const cateList = ref([]);
// 表单确认
const handleConfirm = async () => {
    await formRef.value?.validate()
    fetchAdd()
}
const fetchAdd = async () => {
    await adminAdd(formData)
    popupRef.value?.close()
    emit('success')
}
// 表单取消
const handleClose = () => {
    emit('close')
}
// 打开弹窗
const open = () => {
    popupRef.value?.open()
}
const props = defineProps({
    projectList: {
        type: Array,
        default: () => []
    }
})
defineExpose({ open })

const permissionList = ref([]) // 权限数据
onMounted(async () => {
    permissionList.value = await listAll({ key: 'finance_account_permissions' })
})
</script>
<style lang="scss" scoped>
:deep(.el-form) {
    .el-form-item {
        margin-bottom: 20px;
    }
}
</style>
